<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="pinpin社保" />
	<meta name="description" content="pinpin社保" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>社保运营后台-社保号/资讯文章</title>
	<%@ include file="/WEB-INF/jsp/common/common.jsp" %>
</head>
<body>
	<div id="wrapper">
        <%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
        <div id="page-wrapper">
        	<div class="row">
                <div class="col-lg-12">
                    <!-- 路径导航 -->
                    <ol class="breadcrumb">
				      <li>社保后台</li>
				      <li class="active">资讯文章</li>
				    </ol>
                </div>
            </div>
            <div class="row">
            	<div class="col-lg-12">
            		<div class="panel panel-default">
            			<div class="panel-body">
        			    	<div class="form-inline dt-bootstrap no-footer">
        			    		<div class="row">
                                    <div class="col-lg-11  toggle_vis">
                                    	<button type="button" onclick="toUpdateArticle(0);" class="btn btn-primary btn-sm showcol">添加文章</button>
                                    </div>
        			    	    </div>
        			    		<!-- 表格列表 -->
        			    		<div class="row">
        			    			<div class="col-sm-12">
        			    				<table class="table table-striped table-bordered table-hover no-footer" role="grid">
        			    					<thead>
        			    						<tr>
        			    							<th width="4%">排序</th>
        			    							<th width="7%">推荐级别</th>
                                                    <th>标题</th>
                                                    <th>标题图片</th>
                                                    <th>正文图片</th>
                                                    <th width="6%">阅读数</th>
                                                    <th width="14%">创建时间</th>
                                                    <th width="7%">启用标识</th>
                                                </tr>
        			    					</thead>
        			    					<tbody>
        			    					<c:forEach items="${articleList }" var="article">
        			    						<tr role="row">
        			    							<td>${article.sort }</td>
        			    							<td>
        			    								<c:forEach var="hot" items="${hots }">
			    			    							<c:if test="${article.hot eq hot.num }">${hot.name }</c:if>
			    			    						</c:forEach>
        			    							</td>
        			    							<td>
        			    								<a href="javascript:toUpdateArticle('${article.id }');" id="article_${article.id }">
        			    									${article.title }
        			    								</a>
        			    							</td>
        			    							<td>
        			    								<a href="${article.title_img }" target="_blank">
        			    									${article.title_img }
        			    								</a>
        			    							</td>
        			    							<td>
        			    								<a href="${article.cont_img }" target="_blank">
        			    									${article.cont_img }
        			    								</a>
        			    							</td>
        			    							<td>${article.read_count }</td>
        			    							<td>
        			    								<fmt:formatDate value="${article.create_time }" pattern="yyyy-MM-dd HH:mm:ss"/>
        			    							</td>
        			    							<td>
        			    								<c:forEach var="disabled" items="${disableds }">
			    			    							<c:if test="${article.disabled eq disabled.num }">${disabled.name }</c:if>
			    			    						</c:forEach>
        			    							</td>
        			    						</tr>
        			    					</c:forEach>
        			    					</tbody>
        			    				</table>
        			    			</div>
        			    		</div>
        			    	</div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
	<div id="articlePannel" style="display:none;width:700px">
		<form id="articleForm" method="post" class="form-horizontal">
			<input type="hidden" id="id" name="id"/>
			<div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">文章来源：</label>
	             <div class="col-sm-4">
	             	<input type="text" id="create_by" name="create_by" placeholder="请输入文章来源" class="form-control" style="width:200px;" />
	             </div>
	             <label class="col-sm-2 control-label" style="width:100px;">是否启用：</label>
	             <div class="col-sm-4">
	             	<select id="disabled" name="disabled" class="form-control" style="width:200px;">
		                <option value="1">启用</option>
		                <option value="2">禁用</option>
		            </select>
	             </div>
	        </div>
	        <div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">推荐级别：</label>
	             <div class="col-sm-4">
	             	<select id="hot" name="hot" class="form-control" style="width:200px;">
		                <option value="1">推广</option>
		                <option value="2">热门</option>
		                <option value="3">普通</option>
		            </select>
	             </div>
	             <label class="col-sm-2 control-label" style="width:100px;">文章排序：</label>
	             <div class="col-sm-4">
	             	<input type="text" id="sort" name="sort" placeholder="请输入文章排序(降序)" class="form-control" style="width:200px;" />
	             </div>
	        </div>
			<div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">文章标题：</label>
	             <div class="col-sm-4">
	             	<input type="text" id="title" name="title" placeholder="请输入文章标题" class="form-control" style="width:546px;" />
	             </div>
	        </div>
	        <div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">标题图片：</label>
	             <div class="col-sm-4">
	             	<input type="text" id="title_img" name="title_img" placeholder="请输入标题图片" class="form-control" style="width:546px;" />
	             </div>
	        </div>
	        <div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">文章内容：</label>
	             <div class="col-sm-4">
	             	<textarea id="cont" name="cont" placeholder="填输入文章内容" cols="72" rows="10" class="form-control"></textarea><br/>
	             </div>
	        </div>
	        <div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">正文图片：</label>
	             <div class="col-sm-4">
	             	<input type="text" id="cont_img" name="cont_img" placeholder="请输入正文图片" class="form-control" style="width:546px;" />
	             </div>
	        </div>
			<button type="button" class="btn btn-primary btn-sm" onclick="javascript:updateArticle();">确定</button>
		</form>
	</div>
    <script language="javascript">
    	function toUpdateArticle(id){
    		JSONSubmit("${get_uri}", function(result){
    			if (result.code == 200) {
	   				  var article = result.data;
	   				  $("#id").val(article.id);
	   				  $("#create_by").val(article.create_by);
	   				  $("#disabled").val(article.disabled);
	   				  $("#hot").val(article.hot);
	   				  $("#sort").val(article.sort);
	   				  $("#title").val(article.title);
	   				  $("#title_img").val(article.title_img);
	   				  $("#cont").text(article.cont);
	   				  $("#cont_img").val(article.cont_img);
	   				  var content=document.getElementById("articlePannel");
	   				  var d=dialog({title:'资讯文章',
	   						content:content,
	   						follow:document.getElementById("article_"+id),
	   						quickClose:true}).show();
   			   } else {
	   				showInfo(result.msg);
   			   }
    		}, "json", {id : id});
    	}
    	
    	function checkArticle() {
    		var sort = $("#sort").val();
    		var	regx = /^[0-9]*[1-9][0-9]*$/　　//正整数  
    		if(!regx.test(sort)) {
    			showInfo("文章排序必须非空且为正整数");
    			return false;
    		}
    		var title = $("#title").val();
    		if($.trim(title) == "") {
    			showInfo("文章标题不能为空");
    			return false;
    		}
    		var cont = $("#cont").val();
    		if($.trim(cont) == "") {
    			showInfo("文章内容不能为空");
    			return false;
    		}
    		return true;
    	}
    	
    	function updateArticle() {
    		if(!checkArticle()) {
    			return;
    		}
    		var data = CollectData($("#articleForm"));
    		JSONSubmit("${edit_uri}", function(result) {
    			if(result.code == 200) {
    				document.location.href="${list_uri}";
    			} else {
	   				showInfo(result.msg);
    			}
    		}, "json", data);
    	}
    </script>
</body>
</html>